.variables-panel-open  {
	.clipper {
		display: none;
	}
	#popup-actions #show-variables {
		background-color: hsla(var(--color-accent-hsl), 0.075);
		color: var(--text-accent);
	}
}

.variables-panel {
	display: none;
	background-color: var(--background-primary);
	z-index: 100;
	overflow-x: hidden;
	overflow-y: hidden;
	flex-direction: column;

	&.show {
		display: flex;
	}

	.close-panel {
		opacity: 0;
		background-color: transparent;
		border-radius: var(--radius-s);
		@media (hover: hover) {
			&:hover {
				background-color: var(--background-modifier-hover);
			}
		}
	}

	h3 {
		margin: 0;
		padding: 2px 0 0 0;
		border: none;
		user-select: none;
		-webkit-user-select: none;
		font-size: var(--font-ui-medium);
	}

	.variables-header {
		padding: 2px var(--popup-padding) 0px;
		border-bottom: 1px solid var(--divider-color);
		display: flex;
		flex-direction: column;
		gap: 4px;
	
	}

	.variables-header-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	#variables-search {
		width: 100%;
		padding: 4px 0.5rem;
		border-radius: 40px;
		font-size: var(--font-ui-smaller);
		margin-bottom: 8px;
	}

	.variable-list {
		word-break: break-all;
		overflow-y: auto;
		overflow-x: hidden;
		padding: 0.5rem var(--popup-padding) 0.5rem var(--popup-padding);
		line-height: 1.3;
		font-size: var(--font-ui-smaller);
	}

	.variable-item {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		padding: 4px 18px 4px 0;
		gap: 2px;
		position: relative;
		border-bottom: 1px solid var(--background-modifier-border);
		&:last-child {
			border-bottom: none;
		}
		&.is-collapsed {
			flex-direction: row;
			align-items: center;
			.variable-value {
				white-space: nowrap;
				margin: 0px;
			}
			.chevron-icon {
				transform: rotate(0deg);
			}
		}
		&.has-overflow .chevron-icon {
			display: flex;
		}
	}

	.variable-key {
		font-weight: 600;
		color: var(--text-accent);
		margin-right: 4px;
		flex-shrink: 0;
		cursor: pointer;
		transition: color 0.2s ease;

		@media (hover: hover) {
			&:hover {
				color: var(--text-accent-hover);
			}
		}
	}

	.chevron-icon {
		position: absolute;
		inset-inline-end: 0;
		top: 0;
		width: 16px;
		height: 24px;
		display: none; 
		align-items: center;
		cursor: pointer;
		transition: transform 0.2s ease;
		color: var(--text-faint);
		transform: rotate(90deg);
		user-select: none;
		-webkit-user-select: none;
		margin-inline-start: auto;
		svg {
			width: 16px;
			height: 16px;
		}
		@media (hover: hover) {
			&:hover {
				color: var(--text-accent);
			}
		}
	}

	.variable-value {
		color: var(--text-muted);
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		margin: 0;
	}

	.variable-value,
	.variable-key {
		mark {
			box-shadow: 0 0 0 2px var(--text-highlight-bg);
			background-color: var(--text-highlight-bg);
			color: var(--text-normal);
			border-radius: 2px;
		}
	}
}
